<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link href="../../static/Assets/Plugins/swiper/swiper.min.css" rel="stylesheet" />
    <link href="../../static/Assets/css/comm.css" rel="stylesheet" />
    <link href="../../static/Assets/css/index.css" rel="stylesheet" />
    <script src="../../static/Assets/Plugins/jquery/jquery-1.11.2.min.js"></script>
    <script src="../../static/Assets/Plugins/swiper/swiper.jquery.min.js"></script>
      <style type="text/css">div, tr, td, p, a, h1, h2, h3, h4, h5, h6, ul, li {
        margin: 0;
        padding: 0;
      }
      a {
        text-decoration: none;
      }
      img {
        max-width: 100%;
        border: none;
        outline: none;
        text-decoration: none;
        -ms-interpolation-mode: bicubic;
      }
      a img {
        border: none;
      }
    </style>
  </head>

  <body>
      <div class="top_opacity">
        <div class="top">
            <div class="logo">
                <h1>
                    <a href="index.html">天气查询</a>
                </h1>
            </div>
                <div class="top_nav">
                    <a href="{{ url_for('main') }}">首页</a>
                    <a href="{{ url_for('login') }}">登陆</a>
                    <a href="{{ url_for('weather') }}">天气查询</a>
                    <a href="{{ url_for('walking') }}">路径规划-步行</a>
                    <a href="{{ url_for('view_the_log') }}">日志系统</a>
                    <a href="#">搜索</a>
                </div>
        </div>
      </div>
      <br><br><br><br><br><br><br><br>
  <style type="text/css">
      .wt-mail-body-style a {
        text-decoration: none;
      }

      .wt-mail-body-style p {
        font-size: 12px;
        color: #fff;
        padding: 8px 0;
        margin: 0;
      }

      .wt-mail-body-style p a {
        color: #fff;
      }

      .wt-three-left {
        display: inline-block;
        text-align: center;
        width: 30%;
      }

      .wt-three-right {
        display: inline-block;
        text-align: center;
        width: 30%;
      }

      .wt-three-middle {
        display: inline-block;
        text-align: center;
        vertical-align: bottom;
        width: 30%;
      }

      .wt-mail-body-style a:hover {
        text-decoration: underline;
        cursor: pointer;
      }

      #links a {
        color: #ffffff;
        padding: 4px;
        font-size: 12px;
        display: block;
      }

      @media (max-width: 690px) {
        .wt-three-left,
        .wt-three-middle,
        .wt-three-right {
          width: 100%;
          text-align: center;
          padding: 0 !important;
        }
      }
    </style>

    <div style="font: Verdana normal 14px; background:url(../../static/Assets/images/palm-leaf.png)">
      <div style="width: 700px; margin: 0 auto; overflow: hidden;" id="main">
        <div class="wt-mail-body-style" style="
            margin: 0;
            background-color: #1b1e23;
            border: 1px #e8e8ea solid;
            border-radius: 1rem;
            padding: 20px;
            text-align: center;
          ">
            <br/>
          <h1 style="
              color: #fff;
              font-size: 24px;
              line-height: 26px;
              padding-top: 16px;
              margin-bottom: 10px;
            ">请输入查询的天气城市</h1>
            <input type="text" id="cityT" style="height: 50px " placeholder="请输入城市" />
          <br/> <br/>
          <table style="width: 100%; text-align: center;">
            <tbody>
              <tr>
                <td>
                  <button onclick="weatherFind()" id="search-btn" style="
                      color: #000;
                      margin: 0 auto;
                      background-color: rgb(196, 164, 100);
                      padding: 10px 28px;
                      border-radius: 5px;
                      border-width: initial;
                      border-color: initial;
                      border-image: initial;
                      display: inline-block;
                      margin-bottom: 12px;
                      text-decoration-style: initial;
                      text-decoration-color: initial;
                    ">查询</button>
                </td>
              </tr>
              <tr>

              </tr>
              <tr>
                <td style="padding-bottom: 5px;">
                    <p style="color: rgb(255, 255, 255);font-size: 12px;width: 650px;word-wrap: break-word;"></p>
                  </a>
                </td>
              </tr>
              <tr>

              </tr>
            </tbody>
          </table>
          <br/><br/>
          <div style="
              width: 90%;
              text-align: center;
              margin: auto;
              padding-top: 10px;
              border-top: 1px solid #bfb9b9;
            ">
            <div class="wt-three-left">
              <p style="color: #fff;">
                <a href="{{ url_for('main') }}" target="_blank">首页</a>
              </p>
              <p style="color: #fff;">
                <a href="{{ url_for('login') }}" target="_blank">登陆</a>
              </p>
              <p>
                <a href="#" target="_blank">其他</a>
              </p>
            </div>
            <div class="wt-three-middle" style="width: 80px; vertical-align: top;">
              <a href="{{ url_for('main') }}" target="_blank">
                  <img style="width: 60px; padding-top: 20px;"
                       src="http://img.zcool.cn/community/0110005b025a18a801218cf420ede5.gif"/></a>
            </div>
            <div class="wt-three-right">
              <p>祝您有个好心情</p>
              <p>请点击左侧图标回到首页</p>
              <p>GoodWeather！GoodMood!</p>
            </div>
          </div>
        </div>
      </div>
      <div style="text-align: center; padding: 20px 0; font-size: 12px;">
        <p>
          <span
            style="
              color: gray;
              text-decoration-style: initial;
              text-decoration-color: initial;
            "
            ><br
          /></span>
        </p>
      </div>
    </div>
    <div class="foot">
        <div class="foot_child">
            <div class="foot_left">
                <span>Designed By ZhongLi</span>
            </div>
            <div class="foot_right">
                <a href="{{ url_for('login') }}">加入我们</a>
                <a>|</a>
                <a href="#">Nothing</a>
            </div>
        </div>
    </div>
  </body>
    <script type="text/javascript">
        var Weatherlist=[]
      function weatherFind() {
        var city = document.getElementById("cityT").value;
        console.log(city)
        if (city === ""){
            alert("你有问题！请输入城市！")
        } else {
                $.ajax({
                url:"https://restapi.amap.com/v3/weather/weatherInfo",
                type:'POST',
                data: {
                    key:"2c5e812a00f3d177e589bd4162b15249",
                    city:city,
                },
                success:function (resp) {
                    Weatherlist=resp.lives;
                    alert(
                          "城市:"+Weatherlist[0].city+'\n'+
                          "温度:"+Weatherlist[0].temperature+'\n'+
                          "天气:"+Weatherlist[0].weather+'\n'+
                          "风向:"+Weatherlist[0].winddirection+'\n'+
                          "风力:"+Weatherlist[0].windpower+'\n'
                    )
                    {#console.log(Weatherlist)#}
                    {#document.getElementsByClassName('weathercontent').innerHTML;#}
                    {#re += '<p>' + Weatherlist.province + '</p>';#}
                    {#re += '<p>' + Weatherlist.city + '</p>';#}
                    {#re += '<p>' + Weatherlist.temperature + '</p>';#}
                    {#re += '<p>' + Weatherlist.winddirection + '</p>';#}
                    {#re += '<p>' + Weatherlist.windpower + '</p>';#}
                    {#document.writeln(re);#}
                }
                });
            }
      }
  </script>

</html>
